<style lang="less" scoped>
.detail {
    width: 100%;
    // height: 100%;
    background-color: #fff;
    position: absolute;
    z-index: 10000;

    .backTop {
        position: fixed;
        top: 200px;
        width: 35px;
        right: 14px;
        height: 35px;
        border: 1px solid #ccc;
        border-radius: 50%;
        text-align: center;
        line-height: 35px;
        background-color: #fff;
    }

    .top_img {
        position: absolute;
        top: 0;
        width: 100%;

        img {
            width: 100%;
        }

        .title {
            position: absolute;
            z-index: 100;
            bottom: 0px;
            color: #fff;
            background: linear-gradient(to bottom, rgba(166, 134, 122, .1), #a58478);

            p {
                width: 94%;
                margin: 0 auto;
                margin-bottom: 10px;
            }
        }
    }

    .container {
        width: 94%;
        margin: 0 auto;
        overflow: hidden;

        .main {
            width: 100%;
            margin-top: 20px;
            overflow: hidden;
            font-size: 20px;

        }

        .autor {
            color: #ccc;
            margin-top: 390px;
            font-size: 16px;
        }
    }

    .tab {
        width: 100%;
        background-color: #f6f6f6;
        height: 50px;
        position: fixed;
        bottom: 0;
        z-index: 10000;

        .containe {
            width: 94%;
            margin: 0 auto;
            position: relative;

            .back {
                position: absolute;
                left: 0;
                top: 10px;
                padding-right: 10px;
                border-right: 1px solid #ccc;
            }

            .right {
                position: absolute;
                display: flex;
                justify-content: space-between;
                width: 80%;
                top: 10px;
                right: 0;
                .icon_2{
                    position: relative;
                    .goodNum{
                        position: absolute;
                        top: 0;
                        color: skyblue;
                        font-size: 14px;
                        left: 25px;
                    }
                }
            }
        }
    }
}
</style>

<template>
    <div class="detail">
        <div class="backTop" @click="scrollTop" v-show="isOpen">
            <van-icon name="arrow-up" />
        </div>
        <div class="top_img">
            <img src="https://pica.zhimg.com/v2-0a4b4d924a7beea1f72ae3a80dd478a9.jpg?source=8673f162" alt="">
            <div class="title">
                <p>广东湛江遭遇「摩羯」，台风天鸭群稳稳站立纹丝不动，台风为什么吹不动鸭子？这是什么原理？</p>
            </div>
        </div>
        <div class="container">
            <div class="autor">
                <span>作者/黄河边儿</span>
                <span></span>
            </div>
            <div class="main">
                <p><strong>三方面原因：鸭子腿短重心低 + 流线型身材阻力小 + 大脚掌站得稳。</strong><br /><br>
                    大风来时，大家可能会习惯性的蹲下或者趴在地上，这时候人的重心低，在风中也会更加稳定，<strong>鸭子本身就比较矮胖，而且腿短，导致重心很低，自然不容易被风刮走。</strong><br><br>
                    第二个就是鸭子的体型了，鸭子的体型是一种接近流线型的形状。<strong>流线型物体可以使得气流平滑地沿着物体的表面通过，背风侧的涡流极小，对应物体所收到的风阻也越小。</strong></p>
                <br>
                <img src="https://picx.zhimg.com/v2-05aa9361375560a175827bc5e539392d_720w.jpg?source=8673f162" alt=""
                    style="width: 100%;"><br><br>
                <p>空气动力学中的阻力公式可以表示为

                    <img src="https://www.zhihu.com/equation?tex=++D+%3D+%5Cfrac%7B1%7D%7B2%7D+C_D+%5Crho+A+v%5E2+"
                        alt="">

                    ，
                    <img src="https://www.zhihu.com/equation?tex=C_D" alt="" style="width: 10%;margin: 0 auto;">

                    是阻力系数，<img src="https://www.zhihu.com/equation?tex=%5Crho%5C" alt="" width="16px">



                    是空气密度，A 是物体的迎风面积，v
                    是气流速度。<strong>不同形状的物体，主要是通过影响阻力系数来影响阻力大小，通常流线型的阻力系数是最小的，</strong>所以，自然界中或者工业设计中，常见到这种形状。<br><br>

                    比如，现实生活中，飞机的翅膀就是一种流线型的设计，如下图，细长的锥形指向背面。这种形状可以使得流动的空气在很长的距离上附着在飞机表面上，进而减小飞机受到的阻力。
                </p><br><br>
                <img src="https://pic1.zhimg.com/v2-ccabde9f7fdf0f10ad8ae6a1f9465073_720w.jpg?source=8673f162" alt=""
                    style="width: 100%;"><br><br>
                <p>下图展示了不同形状物体的空气动力学测试结果。其中，左上角的圆形，左下角的方形，和右下角的兔子形状，都比右上角流线型物体具有更大的风阻。<br><br>

                    圆形物体，在物体的背风侧有比较明显的涡流现象。PS：想要减少圆形物体的风阻，可以考虑高尔夫球的做法，也就是在球面上增加很多凹槽，这样就会使得风贴近球面。<br><br>

                    方形物体引起了强烈的涡流现象，特别是在迎风面的边界处，而且背风侧产生大规模的不规则涡流，气流无法顺利绕过物体，这对应着风阻很大。<br><br>

                    复杂形状，如兔子，气流在复杂轮廓周围会产生局部涡流，比如耳朵处还有背风侧，这种非规则形状导致局部区域气流的分离和再附着，会有明显的不规则涡流，阻力就大了。<br><br>

                    与之对比，<strong>流线型明显得减少了气流边界层分离以及低压区的形成，所以对应的阻力是最小的。鸭子的体型接近于流线型，所以在风中有较小的阻力，也就不容易被刮倒。另外，鸭子的羽毛结构也有助于分散风力，</strong>
                    让风从身体表面顺滑通过。</p><br><br>
                <img src="https://pic1.zhimg.com/v2-d03f4d282f690dc5f309013f90331e31.jpg?source=382ee89a" alt=""
                    style="width: 100%;"><br><br>
                <p>最后一个原因就是鸭子的脚掌了，鸭子有个大脚掌，还有脚蹼，所以与地接触面积大。<strong>我们知道，物体倒下的物理力学原因是：重心超出了支撑面积的范围，所以物体才会倒下；如果重心保持在支撑面积的范围内，物体才会处于稳定。</strong>
                    <br><br>

                    那么鸭子的大脚掌，无疑给身体提供了大的支撑面积，所以上身的重心，不容易超出支撑面积，所以就不容易倒了。<br><br>

                    最后，总结一下，<strong>鸭子腿短重心低 + 流线型身材阻力小 + 大脚掌站得稳 让它们在台风中稳稳站立。</strong> <br><br>

                    另外值得一提的是，台风的风速在垂向方向上，并不是一样的。赵林等[1]统计了距离台风中心不同距离的风速的垂向分布情况，如下图。下图一共包括 25
                    个子图，每个子图代表距离台风中心一定位置的垂向风速观测结果（距离数值在子图的中上位置），子图的垂向轴代表高度，纵轴代表风速。<br><br>

                    具体说，7~12 位置的观测显示，垂向风速剖面形态呈现近似 S 形，即水平平均风速在近地面一定高度范围内持续增加达到极大值后，又持续降低直至风速稳定或再次增加；14~19
                    位置显水平风速达到最大值后又以相对缓慢的速度衰减。<br><br>

                    总之，<strong>地面上的风速由于摩擦力较大，通常比高层的风速较小，这也是鸭子能够稳定站立的原因之一。</strong>
                </p><br><br>
                <img src="https://picx.zhimg.com/v2-90bc2ae849a78e8a7491cc0591ba12ea_720w.jpg?source=8673f162" alt=""
                    style="width: 100%;">
            </div>
            <div style="width: 100%;height: 70px;"></div>
        </div>
        <div class="tab">
            <div class="containe">
                <div class="back" @click="$router.go(-1)">
                    <van-icon name="arrow-left" size="0.8rem" />
                </div>
                <div class="right">
                    <div class="icon_1">
                        <router-link :to="{ path: '/comment', query: { rid } }"><van-icon name="smile-comment-o"
                                size="0.8rem" /></router-link>
                    </div>
                    <div class="icon_2">
                        <span class="goodNum">
                            {{goodNum}}
                        </span>
                        <van-icon :name=good @click="goodCit" size="0.8rem" color="skyblue"/>
                    </div>
                    <div class="icon_3">
                        <van-icon :name=star @click='starCit' size="0.8rem"  color="orange"/>
                    </div>
                    <div class="icon_4">
                        <router-link to="/p"><van-icon name="share-o" size="0.8rem" /></router-link>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { detail } from '@/api/index'
import bus2 from '@/until/bus2'

export default {
    data() {
        return {
            rid: '',
            arr: [],
            main: '',
            title: '',
            image: '',
            css: '',
            good: '',
            goodNum:123,
            star: '',
            isOpen: false,
        }
    },
    methods: {
        async getdetail() {
            await detail()
                .then(
                    content => {
                        console.log('--->',content);
                        let { story } = content;
                        let obj = {}
                        obj.title = story.title;
                        obj.image = story.image;
                        obj.main = story.body;
                        obj.css = story.css[0]
                        this.arr.push(obj)
                        // console.log(this.css);
                        let n = story.body.replace(/\u003C/g, "<");
                        let n1 = n.replace(/\u003E/g, ">");
                        obj.main = n1;
                        let main_ele = document.querySelector('.main')
                        main_ele.innerHTML = obj.main;
                        document.querySelector("link").setAttribute("href", `${story.css}`);
                        console.log(document.querySelector("link"));
                    }
                )
        },
        goodCit() {
            let goodId = localStorage.getItem('good');
            if (goodId) {
                this.good = 'good-job-o'
                this.goodNum=this.goodNum-1
                localStorage.removeItem('good')
            } else {
                this.good = 'good-job'
                this.goodNum=this.goodNum+1
                let str = JSON.stringify(this.rid)
                localStorage.setItem('good', str)
            }
        },
        starCit() {
            let strr='star'+this.rid;
            let starId = localStorage.getItem(strr);
            if (starId) {
                this.star = 'star-o'
                localStorage.removeItem(strr)
            } else {
                this.star = 'star'
                let str = JSON.stringify(this.rid)
                localStorage.setItem(strr, str)
            }
        },
        scrollTop() {
            window.scrollTo({
                top: 0,
                behavior: "smooth"
            });
        }
    },
    created() {
        let query = this.$route.query;
        this.rid = query.id;
        // console.log(this.rid);

        let goodId = localStorage.getItem(`good`);
        if (goodId) {
            this.good = 'good-job'
            this.goodNum=this.goodNum+1
        } else {
            this.good = 'good-job-o'
            this.goodNum=this.goodNum-1
        }
        let strr='star'+this.rid
        let starId = localStorage.getItem(strr);
        if (starId) {
            this.star = 'star'
        } else {
            this.star = 'star-o'
        }
    },
    mounted() {
        bus2.$emit('sendRid', `${this.rid}`);
        // this.getdetail()
        window.addEventListener("scroll", () => {
            const scrollTop = document.documentElement.scrollTop;
            if (scrollTop > 500) {
                this.isOpen = true;
                // console.log(1);
            } else {
                this.isOpen = false;
            }
        });
    }
}
</script>